<template>
  <div display="inline-block" >
    <div  class="top">

      <van-row>
        <van-col span="12">
                <!-- 左侧弹出  个人信息 -->
            <van-cell is-link @click="showPopup">
              <van-row>
                <van-col span="8">
                  <van-image round show-error
                      width="30"
                      height="30"
                      :src="this.tbUser.userIcon"/>
                </van-col>
                <van-col span="14"><label class="label1">{{tbUser.userName}}</label></van-col>
                <van-col span="2"></van-col>
              </van-row>
            
            </van-cell>
            <van-popup v-model="show" round="true" position="left" :style="{ height: '100%' , wid} " >
            
              <!-- 放个人信息界面 -->
            <MyInfo></MyInfo>
              <!-- <van-rate v-model="value" /> -->
            </van-popup>

        </van-col>
        <van-col span="4"></van-col>
        <van-col span="8">
          <!-- <van-dropdown-menu>
            
          <van-dropdown-item v-model="value1" :options="option1" >
          </van-dropdown-item>
        </van-dropdown-menu> -->
          <div style="display: flex; justify-content: center;">
          <van-button v-if="!isLogin"    icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E7%99%BB%E5%BD%95.png"
           round to="/userLogin" >登录</van-button>

          <van-button v-if="isLogin"  icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E9%80%80%E5%87%BA%E7%99%BB%E5%BD%95.png"
         round  @click="outLogin()" >退出登录</van-button>
        </div>
        </van-col>
      </van-row>
 

 

    </div>

  </div>
</template>

<script>

import MyInfo from '../User/UserInfo/MyInfo.vue'
import UserAPI from '@/api/UserAPI.js'



export default {
  components: { MyInfo },
name: 'TopIndex',

data() {
  return {

    // 左侧弹出显示
    show: false,
    ItuserId:'',

    // 是否已经登录
    isLogin: false,

    tbUser: {
      userId:'',
      userNumber: '',
      userName: '游客',
      userIcon: 'http://rul4y8e5f.hn-bkt.clouddn.com/%E4%B8%AA%E4%BA%BA.png',
      userPassword: '',
      userPhone: '',
      userEmail: '',

    },
  }
},


props: {
  m_url: {
    type: String,
         default: ''
}
},

created(){
  var token =  localStorage.getItem("token")
  if(token != null || token.length > 0){
    this.getUserInfo()
  }
},

mounted(){
  this.$bus.$on("login", (data) => {

      this.getUserInfo()

    })
},
 
methods: {

  // 退出登录
  outLogin(){
    var result = UserAPI.OutLogin2()
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          // 成功：
          localStorage.removeItem("userDTO")
          localStorage.removeItem("token")
          localStorage.removeItem("userId")
          this.isLogin = false
          this.$router.go(0)
          // this.$router.push("/userLogin")
        }else{
          console.log(val.errorMsg)
          // 否则 登录任为真
          this.isLogin = true
        }
            })

  },


  // 搜索（放搜索请求）
  onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast('取消');
    },

    // 弹出展示个人信息时调用
    showPopup() {
      this.show = true;
    },


    getUserInfo(){
      var result = UserAPI.MyAllInfo()
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
         this.tbUser = val.data
        //  有数据就改为已登录
         this.isLogin = true
        }else{
          console.log(val.errorMsg)
          // 否则 按钮为未登录
          this.isLogin = false
        }
            })
    }

}

}
</script>

<style lang="less">
// .top{
//   position: absolute;
//   // 底部位置
//   top: 0;
//   display: inline-block;
//   // 指定顶层 越大越顶
//   z-index: 10;
// }
.label1{
  color: #0cb4e7;
}
</style>